<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>库区管理</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    仓库名称
    <el-select v-model="datalist.wareId" placeholder="请选择仓库">
        <el-option
                v-for="item in warehouseNameAll"
                :key="item.value"
                :label="item.wareName"
                :value="item.id">
        </el-option>
    </el-select>
    货区名称
    <el-select v-model="datalist.cargoAreaName" placeholder="请选择货区">
        <el-option
                v-for="item in cargoAreaNameAll"
                :label="item.goodsName"
                :value="item.goodsName">
        </el-option>
    </el-select>
    创建时间
    <el-date-picker
            v-model="datalist.settledDate"
            type="datetime"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期时间"
            style="width:400px">
    </el-date-picker>
    <el-button @click="query" type="primary" icon="el-icon-search" style="margin-left: 50px;margin-top: 0px; ">查询
    </el-button>
    <br><br><br>
    <el-button @click="dialogFormVisible = true" type="warning" icon="el-icon-plus" round style="margin-left: 20px;margin-top: 0px; ">添加
    </el-button>
    <br><br><br>
    <template>
        <el-table
                :data="cargoAreaData"
                style="width: 100%">
            <el-table-column
                    label="序号"
                    type="index">
            </el-table-column>
            <el-table-column
                    label="货区编号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.goodsNo }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="货区名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.goodsName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="所属仓库">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tware.wareName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="负责人">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tware.person }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="货架数目">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.shelvesNum }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="货位数目">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.shelvesNum }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="货区描述">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.details }}</span>
                </template>
            </el-table-column>
            <!--<el-table-column
                    label="创建时间">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.deteTime1 }}</span>
              </template>
            </el-table-column>-->
            <el-table-column align="center"
                             prop="scope.row.deteTime1 "
                             :formatter="dateFormat"
                             :resizable="false"
                             label="创建时间">
            </el-table-column>
            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <span style="margin-left: -10px" v-if=" scope.row.status ==='0'">
                        <el-button type="success" round>已启用</el-button>
                    </span>
                    <span style="margin-left: -10px" v-if=" scope.row.status !='0'">
                      <el-button type="danger" round>已禁用</el-button>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" style="width: 180px">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle
                               @click="handleEdit(scope.$index, scope.row)"></el-button><!--修改-->
                    <el-button type="success" icon="el-icon-check" circle
                               @click="handle(scope.$index, scope.row)"></el-button><!--改变状态-->
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                @current-change="refreshData"
                :total="total"
                :current-page="current"
                :page-size="pageSize">
        </el-pagination>
        <!--保存新增用户的对话框-->
        <el-dialog title="添加货区" :visible.sync="dialogFormVisible" @close="closeMyDialog" label-width="100px">
            <el-form :model="tCargoArea" label-width="160px" :inline="true">
                <el-form-item label="仓库名称 :" :label-width="formLabelWidth">
                    <el-select v-model="tCargoAreaAdd.wareId" placeholder="请选择仓库">
                        <el-option
                                v-for="item in warehouseNameAll"
                                :key="item.value"
                                :label="item.wareName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="货区名称:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoAreaAdd.goodsName" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="货区编号:" :label-width="formLabelWidth">
                    <el-select v-model="tCargoAreaAdd.goodsNo" placeholder="请选择货区编号">
                        <el-option
                                v-for="item in shelvesIdAll"
                                :key="item.value"
                                :label="item.id"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域面积:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoAreaAdd.area" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="货区描述:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoAreaAdd.details" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveProductAdd">确 定</el-button>
            </div>
        </el-dialog>
        <!--保存更改用户的对话框-->
        <el-dialog title="编辑货区" :visible.sync="ModifyDisplay" label-width="100px">
            <el-form :model="tCargoArea" label-width="160px" :inline="true">
                <el-form-item label="货区编号:" :label-width="formLabelWidth">
                    <el-select v-model="tCargoAreaAdd.goodsNo" placeholder="请选择货区编号">
                        <el-option
                                v-for="item in shelvesIdAll"
                                :key="item.value"
                                :label="item.id"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="货区名称:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoArea.goodsName" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="仓库名称:" :label-width="formLabelWidth">
                    <el-select v-model="tCargoArea.wareId" placeholder="请选择仓库" @change="changeWare(tCargoArea.wareId)">
                        <el-option
                                v-for="item in warehouseNameAll"
                                :key="item.value"
                                :label="item.wareName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="负责人:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoArea.tware.person" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoArea.tware.telephone" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="货区数目:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoArea.tware.cargoNum" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="货架数目:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoArea.shelvesNum" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="货位数目:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoArea.tshelves.totalNum" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="区域面积:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoArea.area" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
                <el-form-item label="创建时间:" :label-width="formLabelWidth">
                    <el-input v-model="tCargoArea.deteTime1" autocomplete="off" :label-width="formLabelWidthInputBox"
                              readonly></el-input>
                </el-form-item>
                <el-form-item label="状态:" :label-width="formLabelWidth">
                    <span style="margin-left: -10px" v-if=" tCargoArea.status ==='0'">
                        <el-button type="success" round>已启用</el-button></span>
                    <span style="margin-left: -10px" v-if=" tCargoArea.status !='0'">
                        <el-button type="danger" round>已禁用</el-button></span>
                </el-form-item>
                <el-form-item label="仓库描述:" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="tCargoArea.tware.details" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="ModifyDisplay = false">取 消</el-button>
                <el-button type="primary" @click="saveProduct">确 定</el-button>
            </div>
        </el-dialog>
    </template>
</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                cargoAreaData: null, //查询对应的库区数据list
                warehouseNameAll: null,//查询的所有仓库名称
                cargoAreaNameAll: null,//查询所有货区名称
                shelvesIdAll: null,//查询所有货区编号
                datalist: {
                    settledDate: '',//获取到的输入时间
                    cargoAreaName: '', //选择货区
                    wareId: '',//选择仓库id
                },
                formLabelWidth: '80px',
                formLabelWidthInputBox: '30px',
                total: 0,
                current: 1,
                pageSize: 2,//分页数据
                dialogFormVisible: false,    //控制新增对话框的显示
                ModifyDisplay: false,     //控制修改对话框的显示
                tCargoArea: {   //新增+修改共用一个
                    id: '',
                    goodsNo: '', //货区编号
                    goodsName: '', //货区名称
                    wareId: '',   //所属仓库id
                    personId: '',  //所属负责人id
                    shelvesNum: '',  //货架数目
                    deteTime1: '',  //创建时间
                    area: '',  //面积
                    status: '',  //状态
                    details: '', //货区描述
                    companyId: '', //所属公司id
                    tware: {//仓库表
                        id: '',
                        wareName: '', //仓库名称
                        person: '',  //联系人
                        telephone: '',//电话
                        cargoNum: '', //货区数目
                        details: ''  //仓库描述
                    },
                    tshelves: {//货架表
                        id: '',
                        totalNum: '3434'  //货位数量
                    },
                },

                tCargoAreaAdd: {          //添加模块对应的数据，后面要进行清空
                    id: '',
                    wareId: '',
                    goodsName: '',
                    goodsNo: '',
                    area: '',
                    details: ''
                }
            }
        },
        mounted() {//加载
            this.refreshData(1);

            axios.get("/list/t-ware").then(value => {//查询所有仓库名称
                if (value.data.state == 1) {
                    this.warehouseNameAll = value.data.data;
                    console.log(this.warehouseNameAll)
                }
            })
            axios.get("/list/t-cargo-area").then(value => {//查询所有货区名称
                if (value.data.state == 1) {
                    this.cargoAreaNameAll = value.data.data;
                    console.log(this.cargoAreaNameAll)
                }
            })
            axios.get("/list/t-shelves").then(value => {//查询所有货区名称
                if (value.data.state == 1) {
                    this.shelvesIdAll = value.data.data;
                }
            })
        },
        methods: {
            //时间格式化
            dateFormat: function (row, column) {
                var date = new Date(row.deteTime1);
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            },
            //初始查询
            refreshData(current) {//查询数据
                this.current = current;
                axios.get("/t-cargo-area", {
                    params: {
                        current: this.current,//传入分页参数
                        cargoAreaName: this.datalist.cargoAreaName,
                        wareId: this.datalist.wareId,
                        settledDate: this.datalist.settledDate
                    }
                }).then(value => {//查询所有库区数据
                    if (value.data.state == 1) {
                        this.cargoAreaData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                    }
                    console.log(value);
                })
            },
            saveProductAdd() {//添加数据---对应的确认按钮
                axios.post("/addCargoArea", this.tCargoAreaAdd).then(value1 => {//新增
                    if (value1.data.state == 1) {
                        this.$message("添加成功!")
                    }
                    this.dialogFormVisible = false;//关闭窗口
                })
            },
            saveProduct() {//修改---要修改三个表数据t-cargo-area;t-shelves;t-ware
                axios.put("/t-cargo-area/updateCargoArea/", this.tCargoArea).then(value1 => {
                    if (value1.data.state == 1) {
                        this.$message("updateCargoArea修改成功!")
                    }
                }),
                    axios.put("/t-shelves/updateShelves/", this.tCargoArea.shelves).then(value1 => {
                        if (value1.data.state == 1) {
                            this.$message("updateShelves修改成功!")
                        }
                    }),
                    axios.put("/t-ware/updateWare/", this.tCargoArea.tware).then(value1 => {
                        if (value1.data.state == 1) {
                            this.$message("updateWare修改成功!")
                        }
                    }),
                    this.ModifyDisplay = false;//关闭窗口
                this.refreshData(this.current);//重新查询
            },
            closeMyDialog() {        //取消清空---只有在新增中要进行清空
                this.tCargoAreaAdd.id = null,
                    this.tCargoAreaAdd.wareId = null,
                    this.tCargoAreaAdd.goodsName = null,
                    this.tCargoAreaAdd.goodsNo = null,
                    this.tCargoAreaAdd.area = null,
                    this.tCargoAreaAdd.details = null
            },
            query() {//查询按钮对应事件
                this.refreshData(this.current)
            },
            handleEdit(index, row) {   //编辑--点击修改后显示的数据
                this.tCargoArea = row;     //赋值
                console.log(row)
              /*  axios.get("/t-shelves/selectShelves/" + row.goodsNo).then(value => {
                    if (value.data.state == 1) {
                        this.tCargoArea.shelves = value.data.data;
                    }
                })*/
                this.ModifyDisplay = true; //显示
            },
            changeWare(item) { //查询所有的仓库
                axios.get("/list/t-ware/" + item).then(value => {
                    if (value.data.state == 1) {
                        this.tCargoArea.tware = value.data.data;
                        console.log(this.tCargoArea.tware)
                    }
                })
            },
            handle(index, row) {     //修改状态，改变状态
                console.log(row.status);
                console.log(row.id);
                this.$confirm("是否改变状态", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.put("/t-cargo-area/status", {id: row.id, status: row.status}).then(value => {//修改状态
                        if (value.data.state == 1) {
                            this.refreshData(this.current)//重新查询
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消取消'
                    });
                });
            },
        },
    })
</script>
</body>
</html>